<template>
  <div class="box2">
    <div style="display: flex; justify-content: space-between">
      <div class="title">
        <p>里程数-车龄</p>
        <img src="../../images/dataScreen-title.png" alt="" />
      </div>
      <div class="timeselect">
        <el-select
          v-model="startTime"
          placeholder="2023-01"
          style="width: 240px"
          @change="selectStart"
        >
          <el-option
            v-for="item in start"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
        <div
          style="
            color: #fff;
            font-size: 20rpx;
            font-weight: bold;
            margin: 0 10px;
          "
        >
          ——
        </div>
        <el-select
          v-model="endTime"
          placeholder="2024-03"
          style="width: 240px"
          @change="selectEnd"
        >
          <el-option
            v-for="item in end"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </div>
    </div>

    <!-- 图形图标的容器 -->
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, defineProps, defineEmits, watch } from "vue";
import option from "../../../../utils/option";
//引入echarts
import * as echarts from "echarts";

const props = defineProps({
  carmile: Object,
});
// console.log(props.carmile);
const emits = defineEmits(["changeMonth"]); // 定义组件可以触发的事件
const startTime = ref("2023-01");
const endTime = ref("2024-04");
const start = ref();
start.value = option.start;
const end = ref();
end.value = option.end;
const selectStart = () => {
  let startindex = start.value.findIndex(
    (item: any) => item.label == startTime.value
  );
  end.value.forEach((item, index) => {
    if (index < startindex) {
      item.disabled = true;
    } else {
      item.disabled = false;
    }
  });
  emits("changeMonth", { start: startTime.value, end: endTime.value });
};
const selectEnd = () => {
  // console.log(startTime.value, endTime.value);
  emits("changeMonth", { start: startTime.value, end: endTime.value });
};
const setChartOption = (mychart, data) => {
  var option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // Use axis to trigger tooltip
        type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
      },
    },
    legend: {
      textStyle: {
        // 添加textStyle属性
        color: "white", // 设置颜色为蓝色
      },
      data: ["里程数(公里)", "车龄(年)"], // 移除"发布时间"
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      axisLabel: {
        color: "#fff",
      },
    },
    yAxis: {
      type: "category",
      inverse: true, // 将 y 轴反向排列
      axisLabel: {
        inside: false,
        // interval: 1,
        color: "#fff",
        formatter: function (value) {
          if (value.length > 7) {
            // 如果标签长度超过6个字符
            return value.substring(0, 6) + "..."; // 截断并添加省略号
          } else {
            return value;
          }
        },
      },
      data: data[0],
    },
    dataZoom: [
      // 滚动条
      {
        start: 0, //默认为0
        end: 100 - 1500 / 31, //默认为100
        type: "slider",
        maxValueSpan: 6, //窗口的大小，显示数据的条数的
        show: true,
        yAxisIndex: [0],
        handleSize: 0, //滑动条的 左右2个滑动条的大小
        height: "100%", //组件高度
        left: 650, //左边的距离
        right: 15, //右边的距离
        top: 50, //右边的距离
        borderColor: "rgba(43,48,67,.8)",
        fillerColor: "#33384b",
        backgroundColor: "rgba(43,48,67,.8)", //两边未选中的滑动条区域的颜色
        showDataShadow: false, //是否显示数据阴影 默认auto
        showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
        realtime: true, //是否实时更新
        filterMode: "filter",
      },
      // 拖动内容
      {
        type: "inside",
        show: true,
        yAxisIndex: [0, 1],
        start: 1, //默认为1
        end: 100 - 1500 / 31, //默认为100
      },
      // 没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
      {
        type: "inside",
        yAxisIndex: 0,
        zoomOnMouseWheel: false, // 滚轮是否触发缩放
        moveOnMouseMove: true, // 鼠标滚轮触发滚动
        moveOnMouseWheel: true,
      },
    ],
    series: [
      {
        name: "发布时间",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        showLegendSymbol: false, // 将图例隐藏
        data: data[1],
      },
      {
        name: "里程数(公里)",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: data[2],
      },
      {
        name: "车龄(年)",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
        emphasis: {
          focus: "series",
        },
        data: data[3],
      },
    ],
  };
  mychart.setOption(option);
  mychart.resize({
    height: 280,
    animation: {
      duration: 1000,
      easing: "cubicInOut",
    },
  });
};

let charts = ref();
//组件挂载完毕初始化图形图标
onMounted(() => {
  let mychart = echarts.init(charts.value);
  //设置配置项
  setChartOption(mychart, props.carmile);
});
watch(
  () => props.carmile,
  (newValue) => {
    // 在数据变化时重新设置图表的数据和选项
    let mychart = echarts.init(charts.value);
    setChartOption(mychart, newValue);
  }
);
</script>

<style scoped lang="scss">
.box2 {
  width: 100%;
  height: 100%;
  background: url(../../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 100%;
  // background-color: #fff;

  .title {
    margin-left: 20px;
    text-align: left;
    // color: #000;
    font-weight: bold;

    p {
      margin: 5px;
      color: white;
      font-size: 20px;
    }
  }
  .timeselect {
    width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
  }
  .charts {
    height: 250px;
  }
}
</style>